<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>商城物料管理</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="material-mgr">
      <search-form :search="search" @search="searchData" :dropdown-option="dropdownOption">
        <template slot="btn">
          <el-button type="primary" @click="addMaterial">添加物料</el-button>
          <el-button type="primary" @click="importMaterial" style="margin-left: 5px">导入公司物料</el-button>
        </template>
      </search-form>
      <div style="margin-bottom:5px;">
        <el-button v-if="oldSearch.status!==1" type="primary" size="small" @click="updateMaterialListStatus(1)">批量上架
        </el-button>
        <el-button v-if="oldSearch.status!==0" type="primary" size="small" @click="updateMaterialListStatus(0)">批量下架
        </el-button>
      </div>
      <div class="material-mgr-table-div">
        <el-table fit stripe border ref="orderTable" :data="materialList" style="width: 100%" height="parent"
          @selection-change="materialSelectChange">
          <el-table-column type="selection" width="40px" align="center"></el-table-column>
          <el-table-column label="物料名称" prop="materialName" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="分类" min-width="140px" header-align="center">
            <template slot-scope="scope">
              <span>{{scope.row.classifyName.join(' - ')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="规格型号" prop="model" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="编号" prop="color" min-width="100px" header-align="center"></el-table-column>
          <el-table-column label="描述" prop="colorDescription" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column label="材质" prop="material" min-width="100px" header-align="center"></el-table-column>
          <el-table-column label="我司编号" prop="providerNo" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="图片" min-width="150px" header-align="center">
            <template slot-scope="scope">
              <div style="text-align: center;">
                <img v-if="scope.row.showImgUrl!==''" :src="scope.row.showImgUrl"
                  style="max-width:100%;max-height:150px" @load="imageLoaded">
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商家" prop="providerName" min-width="100px" header-align="center"></el-table-column>
          <el-table-column label="单位" prop="unit" min-width="80px" align="center"></el-table-column>
          <el-table-column label="单价" prop="unitPrice" min-width="80px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.unitPrice!==0">{{scope.row.unitPrice}}</span>
            </template>
          </el-table-column>
          <el-table-column label="库存数量" prop="count" min-width="80px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="状态" prop="status" width="80px" align="center">
            <template slot-scope="scope">
              {{i18n.getMsg(`shoppingMallMaterial.status.${scope.row.status}`)}}
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="操作" width="130px" fixed="right" header-align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="updateMaterial(scope.row)">修改</el-button>
              <template v-if="scope.row.status===0">
                <el-button type="primary" size="mini" @click="updateMaterialStatus(scope.row,1)">上架</el-button>
              </template>
              <template v-else-if="scope.row.status===1">
                <el-button type="primary" size="mini" @click="updateMaterialStatus(scope.row,0)">下架</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange">
      </table-pagination>
    </div>

    <el-dialog :title="formType==='add'?'添加物料':'修改物料'" :visible.sync="openFormDialog" top="15vh" width="60%"
      @closed="formDialogClosed">
      <div style="height:calc(70vh - 54px);overflow:auto">
        <material-form v-if="openFormDialog" :type="formType" :material="selectMaterial" @save-success="saveSuccess"
          :dropdown-option="dropdownOption">
        </material-form>
      </div>
    </el-dialog>

    <el-dialog fullscreen class="dialog-fullscreen" title="导入物料" :visible.sync="openImportMaterialDialog">
      <div style="height:100%;overflow:auto">
        <import-material-select :dropdown-option="dropdownOption" @import-material-success="importSuccess">
        </import-material-select>
      </div>
    </el-dialog>
  </div>
</body>

<script src="https://upload.shinehao.com.cn/20181222140744qiniu.min.js"></script>
<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css",
    "/vueSystem/components/css/sysCommonSearch.css",
    "/vueSystem/components/css/imgUpload.css",
    "./css/materialForm.css",
    "./css/importMaterialSelect.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/js/dropdownUtil.js",
    "/vueSystem/models/baseModel.js",
    "/vueSystem/js/checkVaildUtil.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/components/sysCommonSearch.js",
    "/vueSystem/components/imgUpload.js",
    "/vueSystem/components/sysAutocomplete.js",
    "/vueSystem/mixins/tablePaginationMixin.js"
  ]);
</script>
<script src="../utils/moduleUtil.js"></script>
<script src="../models/materialModel.js"></script>
<script src="../models/materialClassifyModel.js"></script>
<script src="./searchForm.js"></script>
<script src="./materialForm.js"></script>
<script src="./importMaterialSelect.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    mixins: [
      tablePaginationMixin()
    ],

    data: function () {
      var search = {
        providerName: '',
        status: 1,
        combinationWhere: ''
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        materialList: [],
        openFormDialog: false,
        openImportMaterialDialog: false,
        formType: '',
        selectMaterial: null,
        selectMaterialList: [],
        dropdownOption: {
          providerNameList: []
        },
        i18n: i18n,
        imgNum: 0
      }
    },

    created: function () {
      this.loading = true;
      var self = this;
      Promise.all([
        this.setProviderNameList(),
        this.setClassifyData()
      ]).then(function () {
        self.loading = false;
        self.setMaterialList(true);
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setProviderNameList: function () {
        var self = this;
        return ajaxRequest('shoppingMall/getAllFactoryName').then(function (providerNameList) {
          self.dropdownOption.providerNameList = providerNameList;
          return providerNameList;
        });
      },

      setClassifyData: function () {
        var self = this;
        return ajaxRequest('shoppingMall/getShoppingCallMaterialType').then(function (materialTypeList) {
          var classifyData = new MaterialClassifyModel(materialTypeList);
          self.dropdownOption.classifyData = classifyData;
          return classifyData;
        });
      },

      setMaterialList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize
        };

        var search = this.search;
        var fields = ['providerName', 'status', 'combinationWhere'];
        SysUtil.setPostData(postData, search, fields);

        this.loading = true;
        this.imgNum = 0;
        var self = this;
        ajaxRequest('shoppingMall/getShoppingCallMaterialData', postData).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var materialList = res.returnData;
          if (!isSearch) {
            if (self.pagination.currentPage !== 1 && materialList.length === 0) {
              self.pagination.totalCount = res.iTotalRecords;
              self.$nextTick(function () {
                self.setMaterialList(isSearch);
              });
              return;
            }
          }

          materialList = ModuleUtil.getFormatMaterialList(materialList, self.dropdownOption.classifyData);
          self.imgNum = _.sumBy(materialList, function (material) {
            return material.showImgUrl === '' ? 0 : 1;
          });
          self.materialList = materialList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setMaterialList(true);
      },

      pageChange: function () {
        this.setMaterialList();
      },

      addMaterial: function () {
        this.formType = 'add';
        this.openFormDialog = true;
      },

      updateMaterial: function (material) {
        this.formType = 'update';
        this.selectMaterial = material;
        this.openFormDialog = true;
      },

      saveSuccess: function () {
        this.openFormDialog = false;
        this.setProviderNameList();
        this.setMaterialList();
      },

      formDialogClosed: function () {
        this.formType = '';
        this.selectMaterial = null
      },

      importMaterial: function () {
        this.openImportMaterialDialog = true;
      },

      importSuccess: function () {
        this.openImportMaterialDialog = false;
        this.setProviderNameList();
        this.setMaterialList();
      },

      updateMaterialListStatus: function (status) {
        var selectMaterialList = this.selectMaterialList;
        var msg = status === 1 ? '上架' : '下架';
        if (selectMaterialList.length === 0) {
          this.$alert(`请选择需要${msg}的物料`, '信息');
          return;
        }

        var selectStatus;
        if (status === 1) {
          selectStatus = 0;
        } else {
          selectStatus = 1;
        }

        selectMaterialList = _.filter(selectMaterialList, {
          status: selectStatus
        });
        if (selectMaterialList.length === 0) {
          this.$alert(`所选择的物料中没有需要${msg}的物料`, '信息');
          return;
        }
        this.updateMaterialStatus(selectMaterialList, status);
      },

      updateMaterialStatus: function (material, status) {
        var ids;
        if (_.isArray(material)) {
          ids = _.map(material, 'id');
        } else {
          ids = [material.id];
        }

        this.loading = true;
        var self = this;
        ajaxRequest('shoppingMall/offShoppingCallMaterial', {
          idArray: JSON.stringify(ids),
          status: status
        }).then(function () {
          self.loading = false;
          var msg = status === 1 ? '物料成功上架' : '物料成功下架';
          self.$alert(msg, '信息', {
            callback: function () {
              self.setMaterialList();
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      materialSelectChange: function (selectMaterialList) {
        this.selectMaterialList = selectMaterialList;
      },

      imageLoaded: function (event) {
        var path = event.path;
        var obj = _.find(path, function (el) {
          return $(el).is('.el-table__body-wrapper');
        });
        if (obj === undefined) {
          return;
        }

        var imgNum = this.imgNum;
        var materialList = this.materialList;
        if (imgNum > 0) {
          imgNum--;
          this.imgNum = imgNum;
          if (imgNum > 0) {
            return;
          }
        }

        if (this.loading) {
          return;
        }
        this.$refs['orderTable'].doLayout();
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      MaterialForm: MaterialForm,
      ImportMaterialSelect: ImportMaterialSelect,
      SearchForm: SearchForm
    }
  });
</script>
<style>
  .material-mgr {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .material-mgr .material-mgr-table-div {
    flex: 1;
    overflow: auto;
  }

  .material-mgr .material-mgr-table-div .el-button+.el-button {
    margin-left: 5px;
  }

  .search-form .el-form-item {
    margin-bottom: 5px;
    margin-right: 5px;
  }

  .search-form .el-form-item:last-child {
    margin-right: 0;
  }
</style>

</html>